<script setup>
import { ref, watch } from 'vue';
import * as storage from '@/util/storage.js';

const menuVOList = R.propOr([], 'menuVOList', storage.readAsObj('userInfo'));
const FstMenuId = R.ifElse(
  R.isEmpty,
  R.always([]),
  R.compose( Array.of, R.path([0, 'id']) ),
);
const selectedKeys = ref(storage.readAsObj('sys-menu') || FstMenuId(menuVOList));
watch(selectedKeys, storage.writeAsStr('sys-menu'))

const iconDic = {
  '任务管理': 'icon-renwuguanli-01',
  '用户管理': 'icon-friend_settings',
  '区划管理': 'icon-quhuaguanli-01',
  '机构管理': 'icon-jigouguanli-01',
  '分组管理': 'icon-fenzuguanli-01',
  '菜单管理': 'icon-addressbook',
  '角色管理': 'icon-classification',
};
</script>

<template>
  <div class="sys-menu-container">
    <a-menu
      class="sys-menu"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      :inline-indent="0">
      <template v-for="item in menuVOList" :key="item.id">
        <a-menu-item>
          <router-link :to="item.routeKey">
            <span :class="['iconfont', iconDic[item.menuName]]"></span>
            {{ item.menuName }}
          </router-link>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<style>
.sys-menu {
  height: 100%;
  padding: 12px 10px;
  user-select: none;
}

.sys-menu .iconfont {
  display: inline-block;
  width: 26px;
  margin-right: 10px;
  text-align: center;
  font-size: 18px;
}

.sys-menu a {
  display: flex;
  align-items: center;
  padding-left: 14px;
  padding-right: 14px;
  color: unset;
}

.sys-menu > li {
  display: flex;
  padding-left: 14px;
  padding-right: 14px;
  height: 48px;
  line-height: 48px;
  border-radius: 6px;
  cursor: pointer;
}

.sys-menu .ant-menu-item { padding-right: 0; }
.sys-menu .ant-menu-item-selected::after { content: none; }

.sys-menu > li:hover,
.sys-menu > li.selected { color: rgb(51,112,255); }

.sys-menu > li.selected { background-color: rgb(239,244,255); }
</style>
